<template>
  <div class="hello" style="background-color: #fff">
    <App></App>
    <x-header>添加题目</x-header>
    <form>
      <group title="选择类型" label-margin-right="2em" label-align="right">
        <popup-picker :data="questionTypeList" v-model="questionType" value-text-align="left"></popup-picker>
      </group>
      <group title="输入题目" label-margin-right="2em" label-align="right">
        <x-input v-model="questionTitle" required></x-input>
      </group>
      <group title="输入答案（可不填）" label-margin-right="2em" label-align="right">
        <!--<x-textarea novalidate v-model="questionAnswerHtml" required></x-textarea>-->
        <div id="editorElem" style="text-align:left"></div>
      </group>
      <box gap="10px 10px">
        <x-button type="primary" @click.native="insertQuestion" action-type="button">提交</x-button>
      </box>
    </form>
    <!--<div style="height:75px;"></div>-->
  </div>
</template>
<script>
import App from '../../App'
import { Divider, Cell, XHeader, Grid, GridItem, Group, XButton, Box, XTextarea, XInput, PopupPicker, AlertModule, Toast } from 'vux'
import WangEditor from 'wangeditor'
// import Vue from 'vue'

// import VueRouter from '../../router/routes.js'
// Vue.use(myTabbar)

export default {
  name: 'QuestionAdd',
  components: {
    App,
    XHeader,
    Divider,
    Cell,
    Grid,
    GridItem,
    Group,
    XButton,
    Box,
    XTextarea,
    XInput,
    PopupPicker,
    AlertModule,
    Toast
  },
  data () {
    return {
      questionTitle: '',
      questionType: ['Java'],
      questionTypeList: [['Java', 'Vue', 'SQL']],
      editor: ''
    }
  },
  methods: {
    insertQuestion () {
      if (Object.is(this.questionType, '')) {
        this.$vux.toast.show({
          type: 'text',
          text: '题目类型不能为空'
        })
        return
      }
      if (Object.is(this.questionTitle, '')) {
        this.$vux.toast.show({
          type: 'text',
          text: '题目不能为空'
        })
        return
      }
      // 提交ajax
      this.$vux.loading.show({text: '正在提交'})
      var _this2 = this
      this.$axios.post('/bz/bzQuestion/insert', {
        catalogId: 1,
        name: this.questionTitle,
        answer: this.editor.txt.text(),
        answerHtml: this.editor.txt.html()
      })
        .then(function (response) {
          _this2.$vux.loading.hide()
          _this2.$vux.loading.show({
            text: '成功提交'
          })
          setTimeout(() => {
            _this2.$vux.loading.hide()
            _this2.$router.push({
              path: '/questionCenter'
            })
          }, 500)
        })
    }
  },
  mounted () {
    // this.editorContent = this.editor.txt.html();  // 获取 html 格式
    // this.editor.txt.text();  // 获取纯文本
    this.editor = new WangEditor('#editorElem')
    // this.editor.customConfig.onchange = (html) => {
    //   this.questionAnswerHtml = html
    // }
    this.editor.create()
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

